<div class="main-section">
    <h1 class="main-section__title">Search filter</h1>

    <p class="main-section__intro">
        <code>lx-search-filter</code> is a directive that create a search filter with various style options.
    </p>

    <p class="main-section__warning">
        This component has been completly reworked since LumX beta version (v0.3.96).<br />Please refer to the updated documentation.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/search-filter/includes/basic.html" lx-js-path="/js/search-filter/demo/demo-search-filter_controller.js"></lx-component>
    <lx-component lx-title="Autocomplete" lx-path="/includes/modules/search-filter/includes/autocomplete.html" lx-js-path="/js/search-filter/demo/demo-search-filter_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-autocomplete</td>
                    <td><code>function</code></td>
                    <td></td>
                    <td>Autocomplete function called on model update (debounce 500ms) to display choices. It will receive the new value typed in the input field, a callback function to pass the results to, and an error callback function to which you can pass an error message.</td>
                </tr>
                <tr>
                    <td>lx-closed</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Define if the input is hidden and should be opened on search icon click.</td>
                </tr>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>black</code></td>
                    <td>Define the search filter buttons color. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-icon</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the icon placed to the left of each result.</td>
                </tr>
                <tr>
                    <td>lx-on-init</td>
                    <td><code>function</code></td>
                    <td></td>
                    <td>A function to be called when the component is initialized. First argument is the component dropdown id, so you can close or open it programmatically</td>
                </tr>
                <tr>
                    <td>lx-on-select</td>
                    <td><code>function</code></td>
                    <td></td>
                    <td>A function to be called when an item is selected in the autocomplete results.</td>
                </tr>
                <tr>
                    <td>lx-search-on-focus</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Define if the autocomplete function should be launched on input focus.</td>
                </tr>
                <tr>
                    <td>lx-theme</td>
                    <td><code>string</code></td>
                    <td><code>light</code></td>
                    <td>Define the search filter input text color. Options: <code>light</code>, <code>dark</code></td>
                </tr>
                <tr>
                    <td>lx-width</td>
                    <td><code>string</code></td>
                    <td><code>240</code></td>
                    <td>Define the search filter width in pixels. A percent value can be defined too. The default value is applied only in closed mode.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>